import {Button, Card, DatePicker, Form, Input, message, Select, Space, Table} from "antd";
import {ColumnsType} from "antd/es/table";
import {useState} from "react";
import {BiDownload, BiSearch} from "react-icons/bi";
import styles from "./index.module.less"

const {RangePicker} = DatePicker;

const MaterialList = () => {
    const [isFileDrapOver, setIsFileDrapOver] = useState(false)
    const columns: ColumnsType = [
        {
            title: "ID",
        }, {
            title: "资源名"
        }, {
            title: "资源类型"
        }, {
            title: "操作",
            render: () => {
                return (
                    <Space>
                        <Button type={"primary"}>编辑</Button>
                        <Button danger>删除</Button>
                    </Space>
                )
            }
        }
    ];

    return (
        <div className={styles["resourceList"]}>
            <Card rootClassName={styles["searchView"]}>
                <Form className={styles["searchForm"]} layout={"inline"} variant={"filled"}>
                    <Form.Item label={"资源名"}>
                        <Input/>
                    </Form.Item>
                    <Form.Item label={"资源类型"}>
                        <Select style={{minWidth: 120}} allowClear showSearch>
                            <Select.Option>
                                图片
                            </Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label={"创建时间"}>
                        <RangePicker allowClear={true} showTime format={"MM-DD HH:mm"}/>
                    </Form.Item>
                    <Space>
                        <Form.Item>
                            <Button icon={<BiSearch/>}>查找</Button>
                        </Form.Item>
                        <Form.Item>
                            <Button icon={<BiDownload/>}>导出</Button>
                        </Form.Item>
                    </Space>
                </Form>
            </Card>
            <Card className={styles["tableView"]}
                  onDrop={(event) => {
                      event.preventDefault();
                      const files = event.dataTransfer.files;
                      message.info(`Files dropped: ${files[0].name}`);
                      setIsFileDrapOver(false)
                      return
                  }}
                  onDragOverCapture={(event) => {
                      event.preventDefault(); // 阻止默认行为以允许拖放
                  }}
                  onDragOver={() => {
                      setIsFileDrapOver(true)
                  }}
                  onDragLeave={() => {
                      setIsFileDrapOver(false)
                  }}
            >
                {isFileDrapOver ? <div>正在上传</div> : <Table dataSource={[]} columns={columns}/>}

            </Card>
        </div>
    );
};

export default MaterialList;
